<template>
  <div>
    <div class="form1">
      <div>
        项目名称：
        <el-input style="width: 200px;" v-model="keyWord.xmmc" placeholder="请输入项目名称"></el-input>
      </div>
      <div>
        提交时间：
        <el-date-picker value-format="yyyy-MM-dd" v-model="keyWord.sqsj" type="date" placeholder="选择记录提交时间"></el-date-picker>
      </div>
      <div>
        手续完成状态
        <el-select v-model="keyWord.sxwcqk">
          <el-option
              v-for="item in sxwcqkSel"
              :key="item.keyvalue"
              :label="item.keyname"
              :value="item.keyvalue">
          </el-option>
        </el-select>
      </div>
      <div>
        状态
        <el-select v-model="keyWord.status">
          <el-option
              v-for="item in statusSel"
              :key="item.keyvalue"
              :label="item.keyname"
              :value="item.keyvalue">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="showXmkj()">搜索</el-button>
      </div>
    </div>
    <el-table :data="xmkjSqList" border class="etable">
      <el-table-column align="center" prop="xmMc" label="项目名称">
      </el-table-column>
      <el-table-column align="center" prop="sqrmc" label="提交人">
      </el-table-column>
      <el-table-column align="center" prop="sqsj" label="提交时间">
      </el-table-column>
      <el-table-column align="center" prop="sqly" label="申请理由">
      </el-table-column>
      <el-table-column align="center" prop="sxwcqk" label="手续完成情况">
        <template slot-scope="scope">
          <el-tag effect="dark" type="primary" v-if="scope.row.sxwcqk === '0'">未提交</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.sxwcqk === '1'">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sprmc" label="审批人">
      </el-table-column>
      <el-table-column align="center" prop="spyj" label="审批意见">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag effect="dark" type="primary" v-if="scope.row.status === '0'">未审批</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.status === '1'">已审批</el-tag>
          <el-tag effect="dark" type="danger" v-if="scope.row.status === '-1'">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="350px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '0'" @click="toapprovalXmKjsq(scope.row.id)" type="success" size="small" v-permission="'approvalXmKjsq'">
            审批
          </el-button>
          <el-button  @click="toXmkjsqDetail(scope.row.id)" type="info" size="small">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination ref="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="size">
      </el-pagination>
    </div>

    <el-dialog  title="项目空间审批" :visible.sync="approvalDialogVisible" width="35%">
      <el-form :model="approvalXmkjsq"
               label-position="right" label-width="100px">
        <el-form-item label="项目名称" prop="userMc">
          <el-input disabled v-model="approvalXmkjsq.xmMc" autocomplete="off" placeholder="请输入学号/职工号"></el-input>
        </el-form-item>
        <el-form-item label="申请理由" label-width="100px">
          <el-input disabled v-model="approvalXmkjsq.sqly" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
        <el-form-item label="手续是否完成" label-width="120px">
          <el-radio v-model="approvalXmkjsq.sxwcqk" label="1">已提交</el-radio>
          <el-radio v-model="approvalXmkjsq.sxwcqk" label="-1">未完成</el-radio>
        </el-form-item>
        <el-form-item label="是否审批通过" label-width="120px">
          <el-radio v-model="approvalXmkjsq.status" label="1">审批通过</el-radio>
          <el-radio v-model="approvalXmkjsq.status" label="-1">驳回</el-radio>
        </el-form-item>
        <el-form-item label="审批意见/驳回理由" label-width="80px">
          <el-input type="textarea" :rows="3" v-model="approvalXmkjsq.spyj" style="width: 510px"></el-input>
        </el-form-item>
        <el-form-item label="空闲房间" prop="roleBh">
          <el-select v-model="approvalXmkjsq.xmfjHm" placeholder="请选择空闲房间">
            <el-option v-for="item in kxfj" :key="item.xmfjHm" :label="item.xmfjHm" :value="item.xmfjHm">
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-button v-if="approvalXmkjsq.kjhm != ''" type="success" @click="upUserFun()">查看房间信息</el-button>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="approvalXmKjsq()">确 定</el-button>
        <el-button @click="approvalDialogVisible = false">取 消</el-button>
       </span>
    </el-dialog>

    <el-dialog  title="项目空间详情" :visible.sync="detailDialogVisible" width="35%">
      <el-descriptions column="1" border>
        <el-descriptions-item label="项目名称">{{ xmkjsqDetail.xmMc }}</el-descriptions-item>
        <el-descriptions-item label="房间号">{{ xmkjsqDetail.xmfjHm }}</el-descriptions-item>
        <el-descriptions-item label="申请理由">{{ xmkjsqDetail.sqly }}</el-descriptions-item>
        <el-descriptions-item label="手续是否完成">
          <el-tag v-if="xmkjsqDetail.sxwcqk == '1'" size="small" type="primary">已提交</el-tag>
          <el-tag v-if="xmkjsqDetail.sxwcqk == '-1'" size="small" type="danger">未完成</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否审批通过">
          <el-tag v-if="xmkjsqDetail.status == '1'" size="small" type="primary">审批通过</el-tag>
          <el-tag v-if="xmkjsqDetail.status == '-1'" size="small" type="danger">已驳回</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审批意见/驳回意见">{{ xmkjsqDetail.spyj }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>
        <el-button @click="detailDialogVisible = false">取 消</el-button>
       </span>
    </el-dialog>

  </div>
</template>

<script>
import {queryXmKjSq, saveXmkj,approvalXmKjsq,queryXmkjKx} from "@/api/cxcyxm"
import axios from "../../axios/axios.js";

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      keyWord: {
        xmmc: "",
        sqsj: "",
        sxwcqk: "",
        status: "",
      },
      statusSel: [{keyname: "全部", keyvalue: ""},
        {keyname: "已审批", keyvalue: "1"},
        {keyname: "已驳回", keyvalue: "-1"},
        {keyname: "未审批", keyvalue: "0"},
      ],
      sxwcqkSel: [{keyname: "全部", keyvalue: ""},
        {keyname: "未提交", keyvalue: "0"},
        {keyname: "已完成", keyvalue: "1"},
      ],
      size: 0,
      loading: true,
      xmkjSqList: [],
      approvalDialogVisible: false,
      newXmDsjl: {
        xmBh: localStorage.getItem("xmBh"),
        xmMc: localStorage.getItem("xmMc"),
        xmfjHm: localStorage.getItem("xmKjhm"),
        xmfjBh: localStorage.getItem("xmKj"),
        xmfjDsjlQkgs: "",
        xmfjDsjlZp: ""
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      approvalXmkjsq:{
        xmMc:"",
        kjhm:"",
        spyj:"",
        sxwcqk:"1",
        status: "1"
      },
      kxfj:[],
      detailDialogVisible :false,
      xmkjsqDetail:{}
    }
  },
  created() {
    this.showXmkj()

  },
  methods: {
    approval(xmmc){
      this.approvalDialogVisible = true;
      this.approvalXmkjsq.xmMc = xmmc
    },
    showXmkj() {
      queryXmKjSq({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord: this.keyWord
      }).then(res => {
        if (res.code !== "200") {
          this.$message.error(res.msg);
        } else {
          this.xmkjSqList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = parseInt(`${val}`);
      this.pageNo = 1;
      queryXmKjSq({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord: this.keyWord
      }).then(res => {
        if (res.code === "200") {
          this.xmkjSqList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }

      })
    },
    handleCurrentChange(val) {
      this.pageNo = parseInt(`${val}`);
      if (this.pageNo > this.totalSize) {
        this.pageNo = this.totalSize
      }

      queryXmKjSq(
          {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            keyWord: this.keyWord
          }).then(res => {
        if (res.code === "200") {
          this.xmkjSqList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    toXmDetail(xmbh) {
      this.$router.push({path: 'cxcyxmXq', query: {xmbh: xmbh}})
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log("this.dialogImageUrl", this.dialogImageUrl)
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    toapprovalXmKjsq(id){
      queryXmkjKx().then(res=>{
        if (res.code == '200'){
          this.kxfj = res.data
          axios({
            method: 'POST',
            url: '/xmkjSq/getXmKjsqDetailById/' + id
          }).then(res => {
            if (res.code == "200"){
              this.approvalXmkjsq = res.data
              this.approvalDialogVisible = true
            }
          })
        }
      })

    },
    approvalXmKjsq(){
      approvalXmKjsq(this.approvalXmkjsq).then(res=>{
        if (res.code === "200") {
          this.approvalDialogVisible = false
          this.showXmkj();
        } else {
          this.$message.error(res.msg);
        }
      })

    },
    toXmkjsqDetail(id){
      axios({
        method: 'POST',
        url: '/xmkjSq/getXmKjsqDetailById/' + id
      }).then(res => {
        if (res.code == "200"){
          this.xmkjsqDetail = res.data
          this.detailDialogVisible = true
        }
      })
    }
  }
}
</script>

<style>
.form1 {
  width: 95%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  right: -5%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0 20px 0;
}

.etable {
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
